<template>
    <div class="warpper-box">
        <form-create 
          class="custom-select"
          v-model="params.fApi" 
          :rule="params.rule" 
          :option="params.option" 
          @btn-search-click="loadTable(true)"
          @btn-reset-click="reset"/>
      <a-card
        style="margin-top: 24px"
        :bordered="false"
        :tabList="tabData"
        :activeTabKey="activeTabKey"
        @tabChange="callbackTab">
        <template #tabBarExtraContent>
           <span v-show="activeTabKey==='1'">
            <a-button type="danger" v-action:riseAddBtn @click="addRise(true)" icon="plus">新增</a-button>
          </span>
          <span v-show="activeTabKey==='2'">
            <a-button type="danger" v-action:mailsAddBtn @click="addMails(true)" icon="plus">新增</a-button>
          </span>
        </template>
        <a-table 
        :columns="table.columns" 
        :pagination="table.pagination" 
        @change="handleTableChange"
        rowKey="id"
        :data-source="table.loadData">
          <span slot="action" slot-scope="text, record">
            <span v-show="activeTabKey==='1'">
              <a @click="addRise(record)" v-action:riseEditBtn>编辑</a>
              <a-divider type="vertical" v-action:riseEditBtn />
              <a-popconfirm
              title="删除无法恢复，是否删除?"
              ok-text="删除"
              cancel-text="取消"
              @confirm="riseDelClick(record)">
                <a href="#" v-action:riseDelBtn>删除</a>
              </a-popconfirm>
            </span>
             <span v-show="activeTabKey==='2'">
              <a @click="addMails(record)" v-action:mailsEditBtn>编辑</a>
              <a-divider type="vertical" v-action:mailsEditBtn/>
              <a-popconfirm
              title="删除无法恢复，是否删除?"
              ok-text="删除"
              cancel-text="取消"
              @confirm="mailsDelClick(record)">
                <a href="#" v-action:mailsDelBtn>删除</a>
              </a-popconfirm>
            </span>
            </span>
            <span slot="appoint" slot-scope="text, record">
              <a-popconfirm
                  :title="record.appoint === 1 ? '取消默认？确认取消！':'确认开启默认！'"
                  ok-text="确认"
                  cancel-text="取消"
                  @confirm="handelUserStatusChange(record)" >
                  <a-switch checked-children="是" un-checked-children="否" 
                  :checked="record.appoint === 1 ? true : false"
                  default-checked />
              </a-popconfirm>
            </span>
            <span slot="enterpriseName" slot-scope="text, record">
              <a-popover title="企业名称" trigger="hover">
                  <template #content>
                  <p style="margin: 0;">{{record.enterpriseName}}</p>
                  </template>
                  <a-button style="padding: 0;color:#000" type="link">{{record.enterpriseName | filterMore(8)}}</a-button>
              </a-popover>
            </span>
            <span slot="creditCode" slot-scope="text, record">
              <a-popover title="纳税人识别号" trigger="hover">
                  <template #content>
                  <p style="margin: 0;">{{record.creditCode}}</p>
                  </template>
                  <a-button style="padding: 0;color:#000" type="link">{{record.creditCode | filterMore(8)}}</a-button>
              </a-popover>
            </span>
            <span slot="address" slot-scope="text, record">
              <a-popover title="地址" trigger="hover">
                  <template #content>
                  <p style="margin: 0;">{{record.address}}</p>
                  </template>
                  <a-button style="padding: 0;color:#000" type="link">{{record.address | filterMore(8)}}</a-button>
              </a-popover>
            </span>
            <span slot="bankName" slot-scope="text, record">
              <a-popover title="开户行" trigger="hover">
                  <template #content>
                  <p style="margin: 0;">{{record.bankName}}</p>
                  </template>
                  <a-button style="padding: 0;color:#000" type="link">{{record.bankName | filterMore(8)}}</a-button>
              </a-popover>
            </span>
            <span slot="accountNo" slot-scope="text, record">
              <a-popover title="银行账号" trigger="hover">
                  <template #content>
                  <p style="margin: 0;">{{record.accountNo}}</p>
                  </template>
                  <a-button style="padding: 0;color:#000" type="link">{{record.accountNo | filterMore(8)}}</a-button>
              </a-popover>
            </span>

        </a-table>
      </a-card>

      <a-modal :title="form.title" :width="640" :visible="form.visible" @ok="handleSubmit" @cancel="form.visible=false">
        <form-create v-model="form.fApi" :rule="form.rule" :option="form.option"/>
      </a-modal>

    </div>
</template>

<script>

import { mapGetters } from 'vuex'
import moment from "moment"
import {
    PARAMS_RISE,
    PARAMS_MAIL,
    COLUMNS_RISE,
    COLUMNS_MAIL,
    FORM_RISE,
    FORM_MAIL,
    OPTION_BLOCK,
    OPTION_INLINE
} from './form'
import { 
  allGetRiseList,
  riseAdd,
  riseEdit,
  riseDel,
  riseSetDefault,
  allGetMailsList,
  mailsAdd,
  mailsEdit,
  mailsDel,
  mailsSetDefault
} from '@/api/manage/billing'
export default {
  name: 'rise',
  data () {
    return {
      activeTabKey:'1',
      params:{
        fApi:{},
        rule:PARAMS_RISE,
        option:OPTION_INLINE
      },
      tabData:[
        { key: '1', tab: '发票抬头'},
        { key: '2', tab: '邮寄地址管理'},
      ],
      table:{
        columns:COLUMNS_RISE,
        loadData:[],
        pagination:{
          pageNum:1,
          pageSize: 10,
          total:0,
          showSizeChanger: true,
					showQuickJumper: true,
          pageSizeOptions: ["10", "20", "50", "100"],
          showTotal: total => `共有 ${total} 条数据`,
        }
      },
      form:{
        title:'新增',
        visible:false,
        fApi:{},
        rule:[],
        option:OPTION_BLOCK
      },
    }
  },
  filters: {
      filterMore (value,num) {
      if (!value) return ''
      if (value.length > num) {
          return value.slice(0,num) + '...'
      }
      return value
      }
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  created () {
    this.initTab();
  },
  methods: {
     initTab(){
      if(this.userInfo.type ===2){
        this.tabData = this.tabData;
      }else if(this.userInfo.type ===3){
        this.tabData = [];
      }else if(this.userInfo.type ===1){
        this.tabData= this.tabData;
      }
       this.loadTable(true);
    },
    callbackTab(keys){
       this.activeTabKey = keys;
       if(keys==='1'){
        this.params.rule = PARAMS_RISE;
        this.table.columns = COLUMNS_RISE;
       }else{
         this.params.rule = PARAMS_MAIL;
         this.table.columns = COLUMNS_MAIL;
       }
       this.loadTable(true);
    },
    async loadTable(flag){
       let params = {};
      if(JSON.stringify(this.params.fApi) !== "{}"){
        const formData = this.params.fApi.formData();
        if(this.activeTabKey == '1'){
          params.startTime = formData.day[0];
          params.endTime = formData.day[1];
        }else{
          params.name = formData.name;
          params.mobile = formData.mobile;
          params.startTime = formData.day[0];
          params.endTime = formData.day[1];
        }
        
      }
      if(flag){
        this.table.pagination.pageNum = 1;
        this.table.pagination.pageSize = 10;
      }
      params.pageNum = this.table.pagination.pageNum;
      params.pageSize = this.table.pagination.pageSize;
      const {code,data} = this.activeTabKey === '1' ? await allGetRiseList(params) : await allGetMailsList(params);
      if(code ==='1'){
        this.table.loadData = data != null ? data.content:[];
        this.table.pagination.total = data != null ? data.total:0;
      }
    },
    handleTableChange(pagination){
      this.table.pagination.pageNum = pagination.current;
      this.table.pagination.pageSize = pagination.pageSize;
      this.loadTable(false);
    },
    addRise(rows){
      this.form.rule = FORM_RISE;
      if(rows === true){
        this.form.title="新增抬头";
        this.$nextTick(()=>{
            this.form.fApi.resetFields();
        })
      }else{
        this.form.title="编辑抬头";
        this.form.id = rows.id;
        this.$nextTick(()=>{
            this.form.fApi.setValue({
                appoint:rows.appoint,
                address:rows.address,
                mobile:rows.mobile,
                bankName:rows.bankName,
                accountNo:rows.accountNo
            })
        })
      }
      this.form.visible = true;
    },
     handleSubmit(){
      this.form.fApi.submit(async (formData, $f) => {
        try {
          if(this.activeTabKey === '1'){
            if(this.form.id){
              formData.id = this.form.id;
            }
            const {code} = this.form.id ? await riseEdit(formData) : await riseAdd(formData);
            if(code === '1'){
              this.$message.success('操作成功');
              this.form.visible = false;
              this.loadTable(true);
            }
          }else{
            let params = {}
            params.appoint = formData.appoint;
            params.name = formData.name;
            params.address = formData.address;
            params.mobile = formData.mobile;
            params.province = formData.area[0];
            params.city = formData.area[1];
            params.area = formData.area[2];
            if(this.form.id){
              params.id = this.form.id;
            }
            const {code} = this.form.id ? await mailsEdit(params) : await mailsAdd(params);
            if(code === '1'){
              this.$message.success('操作成功');
              this.form.visible = false;
              this.loadTable(true);
            }
          }
          
        } catch (error) {
          this.$message.info(JSON.stringify(error));
        }
      })
    },
    async riseDelClick(row){
      let params = {id:row.id};
      const {code} = await riseDel(params);
      if(code === '1'){
        this.$message.success('操作成功');
        this.loadTable(false);
      }
    },
    addMails(rows){
      this.form.rule = FORM_MAIL;
      if(rows === true){
        this.form.title="新增邮寄";
        this.$nextTick(()=>{
            this.form.fApi.resetFields();
        })
      }else{
        this.form.title="编辑邮寄";
        this.form.id = rows.id;
        const area = [rows.province,rows.city,rows.area]
        this.$nextTick(()=>{
          this.form.fApi.setValue({
              name:rows.name,
              mobile:rows.mobile,
              area:area,
              appoint:rows.appoint,
              address:rows.address
          })
        })
      }
      this.form.visible = true;
    },
    async mailsDelClick(row){
      let params = {id:row.id};
      const {code} = await mailsDel(params);
      if(code === '1'){
        this.$message.success('操作成功');
        this.loadTable(false);
      }
    },
    async handelUserStatusChange(el){
      let appoint = el.appoint === 1 ?2:1
      const params = {id:el.id,appoint:appoint};
      console.log(params)
      const {code} = this.activeTabKey === '1' ? await riseSetDefault(params) : await mailsSetDefault(params)
      if(code === '1'){
        this.$message.success('操作成功');
        this.loadTable(false);
      }
    },
    reset(){
      this.params.fApi.resetFields();
      this.loadTable(true);
    }
  }
}
</script>
